<template>
  <div id="app">
    <div class="app-head">
      <div class="app-head-inner">
        <router-link :to="{path: '/'}" class="head-logo">
          <img src="./assets/logo.png">
        </router-link>

        <div class="head-nav">
          <ul class="nav-list">
            <li v-if="username !== ''">欢迎您！{{ username }}</li>
            <li v-if="username === ''" @click="showDialog('isShowLogin')">登录</li>
            <li class="nav-pile">|</li>
            <li v-if="username === ''" @click="showDialog('isShowReg')">注册</li>
            <li v-if="username !== ''" @click="showDialog('isShowReg')">注销</li>
            <li class="nav-pile">|</li>
            <li @click="showDialog('isShowAbout')">关于</li>
          </ul>
        </div>
      </div>
    </div>

    <!-- 路由页面 -->
    <div class="container">
      <!-- <keep-alive> -->
        <router-view></router-view>
      <!-- </keep-alive> -->
    </div>

    <div class="app-foot">
      <p>© 2022 MIT</p>
    </div>

    <!-- 登录 -->
    <Vdialog :is-show="isShowLogin" @on-close="hideDialog('isShowLogin')">
      <LoginForm @has-log="onSuccessLog" @on-success="" @on-error=""></LoginForm>
    </Vdialog>

    <!-- 注册 -->
    <Vdialog :is-show="isShowReg" @on-close="hideDialog('isShowReg')">
      <RegForm @on-success="" @on-error=""></RegForm>
    </Vdialog>

    <!-- 关于 -->
    <Vdialog :is-show="isShowAbout" @on-close="hideDialog('isShowAbout')">
      <p>&nbsp;&nbsp;&nbsp;&nbsp;温州，一座充满活力与激情的城市，一座充满智慧与传奇的城市；温州，孕育了传统精神的智慧与灵性，五千年的人文积淀，
      六百里的山水荟萃，让生活在这里的人具有一种天然无需雕琢的性格；让城市的山水具有了一种磅礴大气的雍容之美；让这篇土地在历史的变迁中，依然保持
      持续的生机和盎然的活力。</p>
      <P>&nbsp;&nbsp;&nbsp;&nbsp;作为独具山水情怀与商务特色的中国优秀旅游城市，景区面积占全市陆域面积四分之一，是浙江省旅游资源最多的城市。温州
      集山、江、海、湖、岛、泉之大成，景区面积占全市国土面积的22.23%，现拥有1个2处世界地质公园，3个中国优秀旅游城市，79个A级旅游景区（其中国家5A
      级旅游景区1个，国家4A级旅游景区19个），3个6处国家重点风景名胜区，4个全国红色旅游经典景区，6家全国工业旅游示范企业，5处国家级森林公园，2处国
      家级自然保护区，34处国家重点文保单位、1个国家级历史文化名镇。温州自然景观丰富多彩、人文底蕴深厚，是旅游者最佳旅游观光、休闲度假胜地。</p>
      <P>&nbsp;&nbsp;&nbsp;&nbsp;温州北部有列入世界地质公园的“海上名山”“寰中绝胜”雁荡山；融天然山水、田园古村、人文景观于一体，被誉为“中国山水诗
      摇篮”的楠溪江；史称“东南第一山”的中雁荡山以及村古、林茂、水美、石奇的首批国家景观村落——黄檀硐村。</p>
      <P>&nbsp;&nbsp;&nbsp;&nbsp;位于温州西南的泰顺县被誉为“中国廊桥之乡”，县域群山延绵，鸟语花香，溪涧纵横，千瀑飞扬，自涌温泉承天氡泉“神水”适宜
      康体疗养；国家级自然保护区乌岩岭原始神秘。苍南县内渔寮、炎亭景区滩平、沙软、浪缓、水清。168公里的“黄金海岸线”令人心旷神怡。</p>
      <P>&nbsp;&nbsp;&nbsp;&nbsp;瓯江口外”百岛“洞头”石峻、滩奇、洞幽、景美、鱼丰、鸟多“。平阳县”贝藻王国“南麂列岛被列入联合国教科文组织世界生物圈
      保护区、国家级海洋自然保护区。中国优秀旅游城市—瑞安市自然景观丰富，寨寮溪山秀水美；更有浙江四大古私家藏书楼之一的玉海楼、先秦文化遗迹石棚墓群
      和全国第一所新式中医学堂利济医学堂；浙南最早最完整的石建筑圣井山石殿等众多文化珍品；在东源中国木活字印刷文化村完整地再现活字印刷的作业场景，
      被联合国教科文组织列入“急需保护的非物质文化遗产名录”。</p>
      <P>&nbsp;&nbsp;&nbsp;&nbsp;文成县百丈漈有“天下第一瀑”之誉；“北有诸葛亮，南有刘伯温”，千古人豪刘基故里令人发思古之幽情。龙麒源景区的畲乡风情，
      铜铃山的“壶穴奇观”令人称奇。翻开温州，你会看到一本散逸着墨香的山水画线装书。</p>
    </Vdialog>
  </div>
</template>

<script>
import Vdialog from './components/base/Vdialog'
import LoginForm from './components/base/LoginForm'
import RegForm from './components/base/RegForm'

export default {
  components: {
    Vdialog,
    LoginForm,
    RegForm
  },
  data: function () {
    return {
      isShowAbout: false,
      isShowLogin: false,
      isShowReg: false,
      username: ''
    }
  },
  methods: {
    showDialog (param) {
      this[param] = true
    },
    hideDialog (param) {
      this[param] = false
    },
    onSuccessLog (data) {
      // 与 db.json 数据比较
      console.log(data)
      this.hideDialog('isShowLogin')
      this.username = data.username
    }
  }
}
</script>

<style>
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
  display: block;
}
body {
  line-height: 1;
}
ol, ul {
  list-style: none;
}
blockquote, q {
  quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
  content: '';
  content: none;
}
table {
  border-collapse: collapse;
  border-spacing: 0;
}
a {
  color: inherit;
  text-decoration: none;
}
body {
  background: #f0f2f5;
  font-family: "Helvetica Neue",Helvetica,Arial,"Hiragino Sans GB","Hiragino Sans GB W3","Microsoft YaHei UI","Microsoft YaHei","WenQuanYi Micro Hei",sans-serif;
  font-size: 14px;
  color: #444;
}
.app-head {
  background: #563636;
  color: #b2b2b2;
  height: 90px;
  line-height: 90px;
  width: 100%;
}
.app-head-inner {
  width: 1200px;
  margin: 0 auto;
}
.head-logo {
  float: left;
  margin-top: 4px;
  margin-left: 30px;
}
.head-logo img {
  width: 90px;
}
.head-nav {
  float: right;
}
.head-nav ul {
  overflow: hidden;
}
.head-nav li {
  cursor: pointer;
  float: left;
}
.nav-pile {
  padding: 0 10px;
}
.app-foot {
  text-align: center;
  height: 80px;
  width: 100%;
  line-height: 80px;
  background: #e3e4e8;
  clear: both;
  margin-top: 30px;
}

.container {
  width: 1200px;
  margin: 0 auto;
}
.hr {
  height: 1px;
  width: 100%;
  background: #ddd;
}
.button {
  background: #4fc08d;
  color: #fff;
  display: inline-block;
  padding: 10px 20px;
  cursor: pointer;
}
.button:hover {
  background: #4fc08d;
}
.g-form {

}
.g-form-line {
  padding: 15px 0;
}
.g-form-label {
  width: 100px;
  font-size: 16px;
  display: inline-block;
}
.g-form-input {
  display: inline-block;
}
.g-form-input input {
  height: 30px;
  width: 200px;
  line-height: 30px;
  vertical-align: middle;
  padding: 0 10px;
  border: 1px solid #ccc;
}
.g-form-btn {
  padding-left: 100px;
}
.g-form-error {
  color: red;
}

</style>
